<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:tiles="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org" lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Seguros</title>

		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="description" content="" />
		<meta name="author" content="" />

		<!-- basic styles -->

		<script src="../../static/jquery/jquery.min.js" th:src="@{/static/jquery/jquery-2.0.3.min.js}"></script>
		<link href="../../static/bootstrap/css/bootstrap.min.css" th:href="@{/static/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
		<script src="../../static/bootstrap/js/bootstrap.min.js" th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
		<link href="../../static/font-awesome/css/font-awesome.min.css" th:href="@{/static/font-awesome/css/font-awesome.min.css}" rel="stylesheet" />			

		<link href="../../static/jquery/jquery-ui.css" th:href="@{/static/jquery/jquery-ui.css}" rel="stylesheet" />
		<script src="../../static/jquery/jquery-ui.js" th:src="@{/static/jquery/jquery-ui.js}"></script>
		
		<link href="../../static/custom/datepicker.css" th:href="@{/static/custom/datepicker.css}" rel="stylesheet" />	
	
		<!-- fonts -->

		<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" th:href="@{'http://fonts.googleapis.com/css?family=Open+Sans:400,300'}" rel="stylesheet" />		
		
		<!-- ace styles -->

		<link href="../../static/custom/ace.min.css" th:href="@{/static/custom/ace.min.css}" rel="stylesheet" />
		<link href="../../static/custom/ace-rtl.min.css" th:href="@{/static/custom/ace-rtl.min.css}" rel="stylesheet" />
		<link href="../../static/custom/ace-skins.min.css" th:href="@{/static/custom/ace-skins.min.css}" rel="stylesheet" />

		<!--[if lte IE 8]>
		  <link href="../../static/custom/ace.min.css" th:href="@{/static/custom/ace-ie.min.css}" rel="stylesheet" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->

		<script src="../../static/custom/ace-extra.min.js" th:src="@{/static/custom/ace-extra.min.js}"></script>

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

		<!--[if lt IE 9]>
		<script src="../../static/custom/html5shiv.js" th:src="@{/static/custom/html5shiv.js}"></script>
		<script src="../../static/custom/respond.min.js" th:src="@{/static/custom/respond.min.js}"></script>
		<![endif]-->
		
		<!-- propios -->
		<link href="../../static/custom/warlux.css" th:href="@{/static/custom/warlux.css}" rel="stylesheet" />	
		
	</head>

	<body>
		<div class="navbar navbar-default" id="navbar">
			<script type="text/javascript">
				try{ace.settings.check('navbar' , 'fixed')}catch(e){}
			</script>

			<div class="navbar-container" id="navbar-container">
				<div class="navbar-header pull-left">
					<a href="#" class="navbar-brand">
						<small>
							<i class="fa fa-suitcase"></i>
							Open Bank Lite
						</small>
					</a><!-- /.brand -->
				</div><!-- /.navbar-header -->

				<div class="navbar-header pull-right" role="navigation">
					<ul class="nav ace-nav">
						<li class="light-blue" th:if="${#authentication}">
							<a data-toggle="dropdown" href="#" class="dropdown-toggle">
								<img class="nav-user-photo" src="../../static/images/business_user.png" th:src="@{/resources/static/images/business_user.png}" alt="Foto" />
								<span class="user-info">
									<small>Bienvenido,</small>
									<span sec:authentication="name">Miguel</span>
								</span>

								<i class="fa fa-caret-down"></i>
							</a>

							<ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
								<li>
									<a href="#">
										<i class="fa fa-cog"></i>
										Opciones
									</a>
								</li>

								<li class="divider"></li>

								<li>
									<a href="#" th:href="@{/logout}">
										<i class="fa fa-power-off"></i>
										Cerrar Sesi&oacute;n
									</a>
								</li>
							</ul>
						</li>
					</ul><!-- /.ace-nav -->
				</div><!-- /.navbar-header -->
			</div><!-- /.container -->
		</div>

		<div class="main-container" id="main-container">
			<script type="text/javascript">
				try{ace.settings.check('main-container' , 'fixed')}catch(e){}
			</script>

			<div class="main-container-inner">
				<a class="menu-toggler" id="menu-toggler" href="#">
					<span class="menu-text"></span>
				</a>

				<div class="sidebar" id="sidebar">
					<script type="text/javascript">
						try{ace.settings.check('sidebar' , 'fixed')}catch(e){}
					</script>

					<ul class="nav nav-list">
						

						<li class="active open">
							<a href="#" class="dropdown-toggle">
								<i class="fa fa-money"></i>
								<span class="menu-text"> Finanzas</span>

								<b class="arrow fa fa-angle-down"></b>
							</a>

							<ul class="submenu">
								<li class="active">
									<a href='/mantenerCaja' th:href="@{/mantenerCaja}">
										<i class="fa fa-angle-double-right"></i>
										Cajas
									</a>
								</li>

								<li>
									<a href="#" title="Funcionalidad por implementar">
										<i class="fa fa-angle-double-right"></i>
										<span class="text-muted">Cuenta Efectivo</span>
									</a>
								</li>

								<li>
									<a href="#" title="Funcionalidad por implementar">
										<i class="fa fa-angle-double-right"></i>
										<span class="text-muted">Dep&oacute;sito a Plazo</span>
									</a>
								</li>

								<li>
									<a href="#" title="Funcionalidad por implementar">
										<i class="fa fa-angle-double-right"></i>
										<span class="text-muted">Pr&eacute;stamos</span>
									</a>
								</li>

								<li>
									<a href="#" title="Funcionalidad por implementar">
										<i class="fa fa-angle-double-right"></i>
										<span class="text-muted">Cobranza Diaria</span>
									</a>
								</li>

								
							</ul>
						</li>
						<li class="disabled">
							<a href="#" class="dropdown-toggle" title="Funcionalidad por implementar">
								<i class="fa fa-users"></i>
								<span class="menu-text"> Socios </span>

								<b class="arrow fa fa-angle-down"></b>
							</a>
							<ul class="submenu">
								<li>
									<a href="#" title="Funcionalidad por implementar">
										<i class="fa fa-angle-double-right"></i>
										<span class="text-muted">Administraci&oacute;n de Socios</span>
									</a>
								</li>
								<li>
									<a href="#" title="Funcionalidad por implementar">
										<i class="fa fa-angle-double-right"></i>
										<span class="text-muted">Atenci&oacute;n al Socio</span>
									</a>
								</li>
								<li>
									<a href="#" title="Funcionalidad por implementar">
										<i class="fa fa-angle-double-right"></i>
										<span class="text-muted">Banca Electr&oacute;nica</span>
									</a>
								</li>																
							</ul>
						</li>
						<li class="disabled">
							<a href="#" title="Funcionalidad por implementar">
								<i class="fa fa-dashboard"></i>
								<span class="menu-text"> Gerencial </span>

							</a>
						</li>
						<li class="disabled" title="Funcionalidad por implementar">
							<a href="#">
								<i class="fa fa-building-o"></i>
								<span class="menu-text"> Bancos </span>

							</a>
						</li>
						<li>
							<a href="#" class="dropdown-toggle" >
								<i class="fa fa-book"></i>
								<span class="menu-text"> Contabilidad </span>

								<b class="arrow fa fa-angle-down"></b>
							</a>

							<ul class="submenu">
								<li>
									<a href='/mantenerTipoCambio' th:href="@{/mantenerTipoCambio}">
										<i class="fa fa-angle-double-right"></i>
										Tipos de Cambio
									</a>
								</li>								
							</ul>
						</li>
						<li class="disabled">
							<a href="#" class="dropdown-toggle" title="Funcionalidad por implementar">
								<i class="fa fa-edit"></i>
								<span class="menu-text"> Par&aacute;metros </span>

								<b class="arrow fa fa-angle-down"></b>
							</a>
						</li>

						<li class="disabled">
							<a href="#" class="dropdown-toggle" title="Funcionalidad por implementar">
								<i class="fa fa-gears"></i>
								<span class="menu-text"> Configuraci&oacute;n </span>

								<b class="arrow fa fa-angle-down"></b>
							</a>							
						</li>

						<li  class="disabled">
							<a href="#" title="Funcionalidad por implementar">
								<i class="fa fa-flag"></i>
								<span class="menu-text"> Cierres </span>

							</a>
						</li>
					</ul><!-- /.nav-list -->

					<div class="sidebar-collapse" id="sidebar-collapse">
						<i class="fa fa-angle-double-left" data-icon1="fa fa-angle-double-left" data-icon2="fa fa-angle-double-right"></i>
					</div>

					<script type="text/javascript">
						try{ace.settings.check('sidebar' , 'collapsed')}catch(e){}
					</script>
				</div>

				<div class="main-content">
					<div class="breadcrumbs" id="breadcrumbs">
						<script type="text/javascript">
							try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
						</script>

						<ul class="breadcrumb">
							<li>
								<i class="fa fa-home home-icon"></i>								
								<a href='/' th:href="@{/}">Inicio</a>
							</li>
							<li>
								<a href="#">Finanzas</a>
							</li>
							<li class="active">Caja</li>
						</ul><!-- .breadcrumb -->
					</div>
					<div class="page-content">
						<div class="page-header">
							<h1>
								Cajas
								<small>
									<i class="fa fa-angle-double-right"></i>
									Operaciones financieras de cajas
								</small>
							</h1>
						</div><!-- /.page-header -->
						<div class="row">
							<div class="col-xs-12">						
								<div class="col-sm-10">
									<div class="widget-box">
										<div class="widget-header">
											<h4>
												<i class="fa fa-user"></i>
												Cliente
											</h4>
										</div>


										<div class="widget-body">
											<div class="widget-main">
												<div class="row">
													<div class="col-md-8">
														<form class="form-horizontal" role="form">
														<div class="form-group">		
															<div class="col-sm-4">
																<input type="text" id="campoCliente" class="form-control" th:value="${cliente != null}? ${cliente.codigoCliente}" placeholder="C&oacute;digo de cliente" />	
															</div>
															<div class="col-sm-6">													
																<input readonly="readonly" type="text" class="col-xs-12 col-sm-12" th:value="${cliente != null}? ${cliente.agencia.descripcion}" placeholder="Agencia"/>
															</div>
															<div class="col-sm-2">
																<a href="#modal-form" id="btn-buscar-cliente" class="btn btn-purple btn-sm btn-block" data-toggle="modal">
																	<i class="fa fa-search icon-on-right bigger-100"></i>
																</a>
															</div>
														</div>												
														
														<div class="form-group">
															<div class="col-sm-12">
																<input readonly="readonly" type="text" th:value="${cliente != null}? ${cliente.nombreCompleto}" class="col-xs-12 col-sm-12" value="Nombre" />
															</div>
														</div>
														<div th:if="${cliente != null and cliente.tieneRegistroPorCobrar == true}" class="form-group">
															<div class="col-sm-12 orange">
																<i class="fa fa-warning"></i>
																El socio tiene deudas en Cuentas por Cobrar
															</div>
														</div>																								
														</form>
													</div>
													<div id="modal-form" class="modal" tabindex="-1">
															<div class="space"></div>
															<div class="space"></div>
															<div class="space"></div>
<!-- 														<div class="modal-dialog"> -->
															<div class="modal-content col-md-8 col-md-offset-2" >
																<div class="modal-header">
																	<button type="button" class="close" data-dismiss="modal">&times;</button>
																	<h4 class="blue bigger">Buscar Cliente</h4>
																</div>
								
																<div class="modal-body overflow-visible">
																	<div class="row">				
																		<div class="col-xs-12">
																				<table id="tabla-clientes" class="table table-bordered table-hover">
																					<thead>
																						<tr>																								
																							<th>Nombre</th>
																							<th>C&oacute;digo</th>
																							<th>Ficha</th>
																							<th>Agencia</th>
																						</tr>
																					</thead>
											
																					<tbody>
																						<tr>
																						<td colspan="4" class="dataTables_empty">Cargando informacion</td>
																						</tr>
																					</tbody>
																				</table>					
																		</div>
																	</div>																	
																</div>
								
																<div class="modal-footer">
																	<form action="#" th:action="@{/getClienteCaja}">
																	<input type="hidden" name="codigoCliente" id="codigoCliente"/>			
																	<button type="submit" id="btnSeleccionarCliente" class="btn btn-sm btn-primary" disabled="disabled">
																		<i class="fa fa-check"></i>
																		Seleccionar
																	</button>
																	
																	<button class="btn btn-sm" data-dismiss="modal">
																		<i class="fa fa-times"></i>
																		Cancelar
																	</button>
																	</form>
																</div>
															</div>
<!-- 														</div> -->
													</div><!-- fin modal -->
													<div th:if="${cliente}"  class="col-md-4">
													<input type="hidden" id="campoOtroCodigoCliente" th:value="${cliente.otroCodigoCliente}"/>
														<div class="text-center">
															<button th:classappend="${cliente.mensajes.isEmpty()}? 'disabled'" class="btn btn-app btn-info btn-sm" data-toggle="modal" data-target="#modal-mensajes">
																<i class="fa fa-envelope bigger-200"></i>
																<br/>
																Mensajes
															</button>																			
															<button class="btn btn-app btn-info btn-sm" id="botonFoto" data-toggle="modal" data-target="#modal-foto">														
																<i class="fa fa-picture-o bigger-200"></i>	
																<br/>
																Foto											
															</button>
															<button class="btn btn-app btn-info btn-sm" id="botonFirma" data-toggle="modal" data-target="#modal-firma">														
																<i class="fa fa-pencil-square-o bigger-200"></i>
																<br/>
																Firma
															</button>
														</div>
													</div>
													<div th:if="${cliente}" id="modal-mensajes" class="modal" tabindex="-1">
														<div class="modal-dialog">
															<div class="modal-content col-md-8 col-md-offset-2" >
																<div class="modal-header">
																	<button type="button" class="close" data-dismiss="modal">&times;</button>
																	<h4 class="blue bigger">Mensajes</h4>
																</div>
								
																<div class="modal-body overflow-visible">
																	<div class="row">				
																		<div class="col-xs-12">
																				<table id="tabla-mensajes" class="table table-bordered table-hover">
																					<thead>
																						<tr>																								
																							<th>Fecha</th>
																							<th>Mensaje</th>
																						</tr>
																					</thead>
											
																					<tbody>
																						<tr th:each="mensaje : ${cliente.mensajes}">																						
																							<td th:text="${#dates.format(mensaje.fechaDesplegar, #messages.msg('date.format'))}">30/11/2013</td>
																							<td th:text="${mensaje.detalleMensaje}">detalle del mensaje</td>																				
																						</tr>
																					</tbody>
																				</table>					
																		</div>
																	</div>																	
																</div>
								
																<div class="modal-footer">																	
																	<button class="btn btn-sm" data-dismiss="modal">
																		<i class="fa fa-times"></i>
																		Cerrar
																	</button>
																</div>
															</div>
														</div>
													</div><!-- fin modal -->
													<div th:if="${cliente}" id="modal-foto" class="modal" tabindex="-1">
														<div class="modal-dialog">
															<div class="modal-content col-md-8 col-md-offset-2" >
																<div class="modal-header">
																	<button type="button" class="close" data-dismiss="modal">&times;</button>
																	<h4 class="blue bigger">Foto</h4>
																</div>
								
																<div class="modal-body overflow-visible">
																	<img alt="foto" th:src="@{../getFoto/} + ${cliente.otroCodigoCliente}" title="Foto"/>																
																</div>
								
																<div class="modal-footer">																	
																	<button class="btn btn-sm" data-dismiss="modal">
																		<i class="fa fa-times"></i>
																		Cerrar
																	</button>
																</div>
															</div>
														</div>
													</div><!-- fin modal -->
													<div th:if="${cliente}" id="modal-firma" class="modal" tabindex="-1">
														<div class="modal-dialog">
															<div class="modal-content col-md-8 col-md-offset-2" >
																<div class="modal-header">
																	<button type="button" class="close" data-dismiss="modal">&times;</button>
																	<h4 class="blue bigger">Firma</h4>
																</div>
								
																<div class="modal-body overflow-visible">
																	<img alt="firma" th:src="@{../getFirma/} + ${cliente.otroCodigoCliente}" title="Firma"/>
																</div>
								
																<div class="modal-footer">																	
																	<button class="btn btn-sm" data-dismiss="modal">
																		<i class="fa fa-times"></i>
																		Cerrar
																	</button>
																</div>
															</div>
														</div>
													</div><!-- fin modal -->
												</div>
											</div>
										</div> <!-- fin cabecera cliente -->									
									</div>									
									<div class="space"></div>
									<div class="alert alert-danger" th:if="${clienteNoEncontrado}">
									<strong>
										Cliente no encontrado
									</strong>
	
									Verifique que el c&oacute;digo sea correcto e intente nuevamente.
									<br/>
									</div>
									<div th:if="${cliente}" class="row">
									<div class="col-xs-12">
										<div class="tabbable">
									<!--<div class="tabbable tabs-left"> -->
											<ul class="nav nav-tabs padding-12 background-blue" id="myTab3">
										<!--<ul class="nav nav-tabs" id="myTab3"> -->
												<li class="active">
													<a data-toggle="tab" href="#abono">
														<i class="blue fa fa-pencil bigger-110"></i>
														Abono
													</a>
												</li>

												<li>
													<a data-toggle="tab" href="#deposito">
														<i class="blue fa fa-level-down bigger-110"></i>
														Dep&oacute;sito
													</a>
												</li>

												<li>
													<a data-toggle="tab" href="#retiro">
														<i class="blue fa fa-level-up bigger-110"></i>
														Retiro
													</a>
												</li>
												<li>
													<a data-toggle="tab" href="#pagoServicios">
														<i class="blue fa fa-lightbulb-o bigger-110"></i>
														Pago de Servicios
													</a>
												</li>
												<li>
													<a data-toggle="tab" href="#monedaExtranjera">
														<i class="blue fa fa-dollar bigger-110"></i>
														Moneda Extranjera
													</a>
												</li>
												<li>
													<a data-toggle="tab" href="#ingresosEgresosVarios">
														<i class="blue fa fa-question bigger-110"></i>
														Ingresos/Egresos Varios
													</a>
												</li>
											</ul>

											<div class="tab-content">
												<div id="abono" class="tab-pane in active">
													<div class="widget-box">
														<div class="widget-header widget-header-small">
															<h4>
																Cr&eacute;ditos
															</h4>
														</div>

														<div class="widget-body">
															<div class="widget-main">
																<div class="row">
																	<div class="col-xs-12">						
																		<div class="table-responsive table-scroll">
																			<table id="tabla-creditos" class="table table-bordered table-hover table-fixed-header">
																				<thead>
																					<tr>
																						<th>Cr&eacute;dito</th>
																						<th>Tipo de cr&eacute;dito</th>
																						<th>Moneda de cr&eacute;dito</th>
																						<th>Estado</th>
																						<th>Cheque</th>
																					</tr>																					
																				</thead>								
																				<tbody>
																					<tr th:each="credito : ${listaCreditos}">
																						<td th:text="${credito.nroCredito}">85026</td>
																						<td th:text="${credito.tipoCredito.descripcion}">VIVIENDA DOLAR</td>
																						<td th:text="${credito.moneda.descripcion}">DOLARES</td>
																						<td th:text="${credito.estadoCredito.descripcion}">DESEMBOLSADO</td>
																						<td th:if="${credito.idCheque == 'S'}"><i class="fa fa-check green"></i></td>
																						<td th:unless="${credito.idCheque == 'S'}">	</td>																						
																						<input type="hidden" th:id="${'campoFechaAprobacion' + credito.nroCredito}" th:value="${#dates.format(credito.fechaAprobacion, #messages.msg('date.format'))}" />
																						<input type="hidden" th:id="${'campoFechaPrimerDesembolso' + credito.nroCredito}" th:value="${#dates.format(credito.fechaPrimerDesembolso, #messages.msg('date.format'))}"/>
																						<input type="hidden" th:id="${'campoFechaUltimoPagoInteresesVenc' + credito.nroCredito}" th:value="${#dates.format(credito.fechaUltimoPagoInteresesVenc, #messages.msg('date.format'))}"/>
																						<input type="hidden" th:id="${'campoFechaVencimiento' + credito.nroCredito}" th:value="${#dates.format(credito.fechaVencimiento, #messages.msg('date.format'))}"/>
																						<input type="hidden" th:id="${'campoMontoDesembolsado' + credito.nroCredito}" th:value="${credito.montoDesembolsado}"/>
																						<input type="hidden" th:id="${'campoSaldoCredito' + credito.nroCredito}" th:value="${credito.saldoCredito}"/>
																						<input type="hidden" th:id="${'campoNumeroCuotas' + credito.nroCredito}" th:value="${credito.numeroCuotas}"/>
																						<input type="hidden" th:id="${'campoTasaInteres' + credito.nroCredito}" th:value="${credito.tasaInteres}"/>
																						<input type="hidden" th:id="${'campoModalidadCobro' + credito.nroCredito}" th:value="${credito.modalidadCobro}"/>
																						<input type="hidden" th:id="${'campoDescripcionPeriodo' + credito.nroCredito}" th:value="${credito.periodicidad.descripcion}"/>
																						<input type="hidden" th:id="${'campoDescripcionEjecutivo' + credito.nroCredito}" th:value="${credito.ejecutivo.nombre}"/>
																						<input type="hidden" th:id="${'campoCodigoEjecutivo' + credito.nroCredito}" th:value="${credito.ejecutivo.idEmpleado}"/>
																						<input type="hidden" th:id="${'campoTotalCargos' + credito.nroCredito}" th:value="${#numbers.formatDecimal(credito.totalCargos, 2, 2, 'POINT')}"/>
																						<input type="hidden" th:id="${'campoTotalComision' + credito.nroCredito}" th:value="${#numbers.formatDecimal(credito.totalComision, 2, 2, 'POINT')}"/>
																						<input type="hidden" th:id="${'campoTotalIntereses' + credito.nroCredito}" th:value="${#numbers.formatDecimal(credito.totalIntereses, 2, 2, 'POINT')}"/>
																						<input type="hidden" th:id="${'campoTotalMora' + credito.nroCredito}" th:value="${#numbers.formatDecimal(credito.totalMora, 2, 2, 'POINT')}"/>
																						<input type="hidden" th:id="${'campoTotalPoliza' + credito.nroCredito}" th:value="${#numbers.formatDecimal(credito.totalPoliza, 2, 2, 'POINT')}"/>
																						<input type="hidden" th:id="${'campoTotalPrincipal' + credito.nroCredito}" th:value="${#numbers.formatDecimal(credito.totalPrincipal, 2, 2, 'POINT')}"/>
																						<input type="hidden" th:id="${'campoTotalAdeudado' + credito.nroCredito}" th:value="${#numbers.formatDecimal(credito.totalAdeudado, 2, 2, 'POINT')}"/>			
																						<input type="hidden" th:id="${'campoVencimientoMasAntigua' + credito.nroCredito}" th:value="${credito.fechaVencimientoMasAntigua != null}? ${#dates.format(credito.fechaVencimientoMasAntigua, #messages.msg('date.format'))}"/>
																						<input type="hidden" th:id="${'campoNroCuotasVencidas' + credito.nroCredito}" th:value="${credito.nroCuotasPendientes}"/>
																						<input type="hidden" th:id="${'campoInteresPospuesto' + credito.nroCredito}" th:value="${credito.interesPospuesto} ? ${#numbers.formatDecimal(credito.interesPospuesto, 2, 2, 'POINT')} : 00.00"/>
																						<input type="hidden" th:id="${'campoInteresVencido' + credito.nroCredito}" th:value="${#numbers.formatDecimal(credito.interesVencido, 2, 2, 'POINT')}"/>
																					</tr>
																					<tr th:if="${listaCreditos.isEmpty()}">
																		                <td colspan="5">No se encontraron registros de cr&eacute;ditos</td>
																		            </tr>
																				</tbody>
																			</table>																																									
																		</div>																		
																	</div>
																	</div>
																	<div class="col-xs-12">
																		<h4 class="header smaller lighter blue">
																			Datos Generales
																		</h4>
																	</div>	
																	<form class="form-horizontal" role="form">
																		<div class="form-group">
																		    <label for="showFechaPrimerDesembolso" class="col-sm-1 control-label small center">Fecha Desembolso</label>
																		    <div class="col-sm-2">
																		      <input type="text" readonly="readonly" class="col-sm-12" id="showFechaPrimerDesembolso"/>
																		    </div>
																		    <label for="showFechaVencimiento" class="col-sm-1 control-label  small center">Fecha Vencimiento</label>
																		    <div class="col-sm-2">
																		      <input type="text" readonly="readonly" class="col-sm-12" id="showFechaVencimiento"/>
																		    </div>
																		    <label for="showFechaAprobacion" class="col-sm-1 control-label  small center">Fecha Aprobaci&oacute;n</label>
																		    <div class="col-sm-2">
																		      <input type="text" readonly="readonly" class="col-sm-12" id="showFechaAprobacion"/>
																		    </div>
																		    <label for="showFechaUltimoPagoInteresesVenc" class="col-sm-1 control-label  small center">&Uacute;ltimo Movimiento</label>
																		    <div class="col-sm-2">
																		      <input type="text" readonly="readonly" class="col-sm-12" id="showFechaUltimoPagoInteresesVenc"/>
																		    </div>
																		</div>
																		<div class="form-group">
																		    <label for="showMontoDesembolsado" class="col-sm-1 control-label small center">Monto del Cr&eacute;dito</label>
																		    <div class="col-sm-2">
																		      <input type="text" readonly="readonly" class="col-sm-12" id="showMontoDesembolsado"/>
																		    </div>
																		    <label for="showSaldoCredito" class="col-sm-1 control-label  small center">Saldo Actual</label>
																		    <div class="col-sm-2">
																		      <input type="text" readonly="readonly" class="col-sm-12" id="showSaldoCredito"/>
																		    </div>
																		    <label for="showCodigoEjecutivo" class="col-sm-1 control-label  small center">Ejecutivo</label>
																		    <div class="col-sm-1">
																		      <input type="text" readonly="readonly" class="col-sm-12" id="showCodigoEjecutivo"/>
																		    </div>
																		    <div class="col-sm-4">
																		      <input type="text" readonly="readonly" class="col-sm-12" id="showDescripcionEjecutivo"/>
																		    </div>
																		</div>
																		<div class="form-group">
																		    <label for="showTasaInteres" class="col-sm-1 control-label small center">Tasa Inter&eacute;s</label>
																		    <div class="col-sm-2">
																		      <input type="text" readonly="readonly" class="col-sm-12" id="showTasaInteres"/>
																		    </div>
																		    <label for="showNumeroCuotas" class="col-sm-1 control-label  small center">N&uacute;mero Cuotas</label>
																		    <div class="col-sm-2">
																		      <input type="text" readonly="readonly" class="col-sm-12" id="showNumeroCuotas"/>
																		    </div>
																		    <label for="showDescripcionPeriodo" class="col-sm-1 control-label  small center">Periodo</label>
																		    <div class="col-sm-2">
																		      <input type="text" readonly="readonly" class="col-sm-12" id="showDescripcionPeriodo"/>
																		    </div>
																		    <label for="showModalidadCobro" class="col-sm-1 control-label  small center">Cobro</label>
																		    <div class="col-sm-2">
																		      <input type="text" readonly="readonly" class="col-sm-12" id="showModalidadCobro"/>
																		    </div>
																		</div>
																	</form>
																	</div> <!-- fin bloque creditos body main-->
													</div> <!-- fin bloque creditos body -->										
												  </div> <!-- fin bloque creditos box -->
												  <div class="space"></div>	
												  <div id="abonos-planPagos"  tiles:include="abonos-planPagos" class="widget-box">
													--------- ACA VIENE EL BLOQUE abonos-planPagos ---------						
												  </div> <!-- fin bloque pagos box -->
																						
																
														
												</div>

												<div id="deposito" class="tab-pane">
													<p>deposito</p>
													<p>deposito</p>
													<p>deposito</p>
													<p>deposito</p>
													<p>deposito</p>
													<p>deposito</p>
													<p>deposito</p>
													<p>deposito</p>
													<p>deposito</p>
													<p>deposito</p>
												</div>

												<div id="retiro" class="tab-pane">
													<p>retiro</p>
													<p>retiro</p>
													<p>retiro</p>
													<p>retiro</p>
													<p>retiro</p>
													<p>retiro</p>
													<p>retiro</p>
													<p>retiro</p>
													<p>retiro</p>
													<p>retiro</p>
												</div>
												<div id="pagoServicios" class="tab-pane">
													<p>pago de servicios</p>
													<p>pago de servicios</p>
													<p>pago de servicios</p>
													<p>pago de servicios</p>
													<p>pago de servicios</p>
													<p>pago de servicios</p>
													<p>pago de servicios</p>
													<p>pago de servicios</p>
													<p>pago de servicios</p>
													<p>pago de servicios</p>
												</div>
												<div id="monedaExtranjera" class="tab-pane">
													<p>moneda extrangera</p>
													<p>moneda extrangera</p>
													<p>moneda extrangera</p>
													<p>moneda extrangera</p>
													<p>moneda extrangera</p>
													<p>moneda extrangera</p>
													<p>moneda extrangera</p>
													<p>moneda extrangera</p>
													<p>moneda extrangera</p>
													<p>moneda extrangera</p>
												</div>
												<div id="ingresosEgresosVarios" class="tab-pane">
													<p>ingresos egresos varios</p>
													<p>ingresos egresos varios</p>
													<p>ingresos egresos varios</p>
													<p>ingresos egresos varios</p>
													<p>ingresos egresos varios</p>
													<p>ingresos egresos varios</p>
													<p>ingresos egresos varios</p>
													<p>ingresos egresos varios</p>
													<p>ingresos egresos varios</p>
													<p>ingresos egresos varios</p>
												</div>
											</div>
										</div>
									</div><!-- /span -->									
								</div><!-- /row -->	
								
							</div>
						</div>						
					</div><!-- /.page-content -->
				</div><!-- /.main-content -->

				<div class="ace-settings-container" id="ace-settings-container">
					<div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
						<i class="fa fa-cog bigger-150"></i>
					</div>

					<div class="ace-settings-box" id="ace-settings-box">
						<div>
							<div class="pull-left">
								<select id="skin-colorpicker" class="hide">
									<option data-skin="default" value="#438EB9">#438EB9</option>
									<option data-skin="skin-1" value="#222A2D">#222A2D</option>
									<option data-skin="skin-2" value="#C6487E">#C6487E</option>
									<option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
								</select>
							</div>
							<span>&nbsp; Elegir Tema</span>
						</div>

						<div>
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" />
							<label class="lbl" for="ace-settings-navbar"> Fijar Men&uacute; Superior</label>
						</div>

						<div>
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" />
							<label class="lbl" for="ace-settings-sidebar"> Fijar Men&uacute; Lateral</label>
						</div>
					</div>
				</div><!-- /#ace-settings-container -->
				</div><!-- /.main-content -->
			</div><!-- /.main-container-inner -->

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="fa fa-angle-double-up fa fa-only bigger-110"></i>
			</a>
		</div><!-- /.main-container -->
		
		<script src="../../static/custom/typeahead-bs2.min.js" th:src="@{/static/custom/typeahead-bs2.min.js}"></script>

		<!-- page specific plugin scripts -->

		<script src="../../static/custom/bootstrap-datepicker.min.js" th:src="@{/static/custom/bootstrap-datepicker.min.js}"></script>
		<script src="../../static/custom/jquery.dataTables.min.js" th:src="@{/static/custom/jquery.dataTables.min.js}"></script>
		<script src="../../static/custom/jquery.dataTables.bootstrap.js" th:src="@{/static/custom/jquery.dataTables.bootstrap.js}"></script>		

		<!-- ace scripts -->

		<script src="../../static/custom/ace-elements.min.js" th:src="@{/static/custom/ace-elements.min.js}"></script>
		<script src="../../static/custom/ace.min.js" th:src="@{/static/custom/ace.min.js}"></script>

		<!-- inline scripts related to this page -->
		
		<script th:inline="javascript" type="text/javascript">
		// <![CDATA[

		    var oTable;
		    var codigoCliente;
		    var tPlanPagosActiva;
		    var tCargosActiva;

		            
		    $(document).ready(function() {
				
		    	$('#modal-form').on('shown.bs.modal', function () {
		    		if(oTable == null){
		    			oTable = $('#tabla-clientes').dataTable( {
					    	"bProcessing": true,
					        "sAjaxSource": "/cooperativas/getClientesAjax"
					    });
		    		}		    		
		    	})

		    	
				$("#tabla-clientes tbody").delegate("tr", "click", function() {
					var cuenta = $('#tabla-clientes >tbody >tr >td').length;
					if (cuenta > 1){						
						if ( $(this).hasClass('success') ) {
				            $(this).removeClass('success');
				            codigoCliente = null;
				            $("#codigoCliente").val(codigoCliente);
				            $("#btnSeleccionarCliente").prop("disabled", true);				            
				        }
				        else {
				            oTable.$('tr.success').removeClass('success');
				            $(this).addClass('success');
				            codigoCliente = $("td:eq(1)", this).text();
				            $("#codigoCliente").val(codigoCliente);
				            $("#btnSeleccionarCliente").prop("disabled", false); 				            
				       }
					}
					  
					});
				
				$("#tabla-creditos tbody").delegate("tr", "click", function() {
					
						if ( $(this).hasClass('success') ) {
				            $(this).removeClass('success');
				            $('#showFechaAprobacion').val(null);
				            $('#showFechaPrimerDesembolso').val(null);
				            $('#showFechaUltimoPagoInteresesVenc').val(null);
				            $('#showFechaVencimiento').val(null);
				            $('#showMontoDesembolsado').val(null);
				            $('#showSaldoCredito').val(null);
				            $('#showNumeroCuotas').val(null);
				            $('#showTasaInteres').val(null);
				            $('#showModalidadCobro').val(null);
				            $('#showDescripcionPeriodo').val(null);
				            $('#showDescripcionEjecutivo').val(null);
				            $('#showCodigoEjecutivo').val(null);
				            $('#showTotalCargos').val(null);
				            $('#showTotalComision').val(null);
				            $('#showTotalIntereses').val(null);				            
				            $('#showTotalMora').val(null);
				            $('#showTotalPoliza').val(null);
				            $('#showTotalPrincipal').val(null);
				            $('#showTotalAdeudado').val(null);
				            $('#showVencimientoMasAntigua').val(null);
				            $('#showInteresPospuesto').val(null);
				            $('#showInteresVencido').val(null);
				            $('#showNroCuotasVencidas').val(null);
				            tPlanPagosActiva.hide();
				            tCargosActiva.hide();
				            $('#divTotales').hide();
				        }
				        else {
				        	var nroCredito = $("td:eq(0)", this).text();
				        	$('#tabla-creditos tr.success').removeClass('success');
				            $(this).addClass('success');
				            $('#showFechaAprobacion').val($('#campoFechaAprobacion'+ nroCredito).val());
				            $('#showFechaPrimerDesembolso').val($('#campoFechaPrimerDesembolso'+ nroCredito).val());
				            $('#showFechaUltimoPagoInteresesVenc').val($('#campoFechaUltimoPagoInteresesVenc'+ nroCredito).val());
				            $('#showFechaVencimiento').val($('#campoFechaVencimiento'+ nroCredito).val());
				            $('#showMontoDesembolsado').val($('#campoMontoDesembolsado'+ nroCredito).val());
				            $('#showSaldoCredito').val($('#campoSaldoCredito'+ nroCredito).val());
				            $('#showNumeroCuotas').val($('#campoNumeroCuotas'+ nroCredito).val());
				            $('#showTasaInteres').val($('#campoTasaInteres'+ nroCredito).val());
				            $('#showModalidadCobro').val($('#campoModalidadCobro'+ nroCredito).val());
				            $('#showDescripcionPeriodo').val($('#campoDescripcionPeriodo'+ nroCredito).val());
				            $('#showDescripcionEjecutivo').val($('#campoDescripcionEjecutivo'+ nroCredito).val());
				            $('#showCodigoEjecutivo').val($('#campoCodigoEjecutivo'+ nroCredito).val());
				            $('#showTotalCargos').val($('#campoTotalCargos'+ nroCredito).val());
				            $('#showTotalComision').val($('#campoTotalComision'+ nroCredito).val());
				            $('#showTotalIntereses').val($('#campoTotalIntereses'+ nroCredito).val());			            
				            $('#showTotalMora').val($('#campoTotalMora'+ nroCredito).val());
				            $('#showTotalPoliza').val($('#campoTotalPoliza'+ nroCredito).val());
				            $('#showTotalPrincipal').val($('#campoTotalPrincipal'+ nroCredito).val());
				            $('#showTotalAdeudado').val($('#campoTotalAdeudado'+ nroCredito).val());
				            $('#showVencimientoMasAntigua').val($('#campoVencimientoMasAntigua'+ nroCredito).val());
				            $('#showInteresPospuesto').val($('#campoInteresPospuesto'+ nroCredito).val());
				            $('#showInteresVencido').val($('#campoInteresVencido'+ nroCredito).val());
				            $('#showNroCuotasVencidas').val($('#campoNroCuotasVencidas'+ nroCredito).val());
				            if(tPlanPagosActiva != null){
				            	tPlanPagosActiva.hide();
				            }
				            if(tCargosActiva != null){
				            	tCargosActiva.hide();
				            }
				            $('#campoTabla-planPagos' + nroCredito).show();
				            tPlanPagosActiva = $('#campoTabla-planPagos' + nroCredito);
				            
				            $('#campoTabla-cargos' + nroCredito).show();
				            tCargosActiva = $('#campoTabla-cargos' + nroCredito);
				            $('#divTotales').show();
				            
				       }
					});		
			    
			    
			    $("#campoCliente").on('keyup', function(e) {
			        if (e.which == 13 || e.keyCode == 13) {
			        	codigoCliente = $(this).val();
				    	window.location = '/cooperativas/getClienteCaja/?codigoCliente=' + codigoCliente;
			        }
			    });

			} );
		    
		    

		            
			jQuery(function($) {
								
				$('table th input:checkbox').on('click' , function(){
					var that = this;
					$(this).closest('table').find('tr > td:first-child input:checkbox')
					.each(function(){
						this.checked = that.checked;
						$(this).closest('tr').toggleClass('selected');
					});
						
				});
			
				//enable datepicker
				$(function() {
				    $( "#sdate" ).datepicker({
				      dateFormat: "dd/mm/yy",
				      autoclose:true
				    });
				  });

				
				//override dialog's title function to allow for HTML titles
				$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
					_title: function(title) {
						var $title = this.options.title || '&nbsp;'
						if( ("title_html" in this.options) && this.options.title_html == true )
							title.html($title);
						else title.text($title);
					}
				}));	
			
				$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
				function tooltip_placement(context, source) {
					var $source = $(source);
					var $parent = $source.closest('table')
					var off1 = $parent.offset();
					var w1 = $parent.width();
			
					var off2 = $source.offset();
					var w2 = $source.width();
			
					if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
					return 'left';
				}
			})
			// ]]>
		</script>
		
	</body>
</html>